<template>
  <div class="mod-home">
    <div class="panl">
      <div class="panl-l">
        <div class="title">学生统计</div>
        <div class="info-list">
          <div class="info-item">
            <div class="value">{{statStudentInfo.total || 0}}</div>
            <div class="tips">总人数</div>
          </div>
          <div class="info-item">
            <div class="value">{{statStudentInfo.weekTotal}}</div>
            <div class="tips">本周新增</div>
          </div>
          <div class="info-item">
            <div class="value">{{statStudentInfo.todayTotal}}</div>
            <div class="tips">今日新增</div>
          </div>
        </div>
      </div>
      <!-- <div class="panl-r">
        <div class="title">学生统计</div>
        <div class="info-list">
          <div class="info-item">
            <div class="value">715</div>
            <div class="tips">收费总额</div>
          </div>
          <div class="info-item">
            <div class="value">715</div>
            <div class="tips">收费总额</div>
          </div>
          <div class="info-item">
            <div class="value">715</div>
            <div class="tips">收费总额</div>
          </div>

        </div>
      </div> -->
    </div>
    <div class="static-info">
      <div class="static-list bdr">
        <div class="static-list-title">用户操作动态</div>
        <el-table
          :data="remindList"
          height="400"
          :show-header="false"
          style="width: 100%">
          <el-table-column
            prop="operate"
            label="用户"
            header-align="center"
            align="center"
           >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            header-align="center"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
      <div class="static-list">
        <div class="static-list-title">学生报名信息</div>
        <el-table
          :data="studentRemindList"
          :show-header="false"
          height="400"
          style="width: 100%">
          <el-table-column
            prop="studentName"
            label="姓名"
            header-align="center"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="studentNo"
            header-align="center"
            align="center"
            label="学号">
          </el-table-column>
          <el-table-column
            prop="gradeName"
            label="年级"
            header-align="center"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            header-align="center"
            align="center"
            >
          </el-table-column>
          
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        statStudentInfo: {},
        page: 1,
        limit: 50,
        stuPage: 1,
        stuLimit: 50,
        studentRemindList: [],
        remindList: [],
        
      }
    },
    created() {
      this.getStaticStudent();
      this.getRemind();
      this.getStudentRemind();
    },
    methods:{
      getStaticStudent() {
        this.$http({
          url: this.$http.adornUrl(`/sys/stat/student`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.statStudentInfo = data;
          }
        })
      },
      getRemind() {//上线提醒 
        this.$http({
          url: this.$http.adornUrl(`/sys/log/remind`),
          method: 'get',
          params: this.$http.adornParams({
            page: this.page,
            limit: this.limit
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.remindList = data.page.list;
          }
        })
      },
      getStudentRemind() {//学生提醒 
        this.$http({
          url: this.$http.adornUrl(`/sys/edustudent/remind/list`),
          method: 'get',
          params: this.$http.adornParams({
            page: this.stuPage,
            limit: this.stuLimit
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.studentRemindList = data.page.list;
          }
        })
      }

    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
  .panl{
    display: flex;
    justify-content: space-around;
    align-items: center;
     /* box-shadow: 0px 2px 2px 0px rgba(23,105,255,0.16); */
  }
  .panl  .title {
    font-size: 12px;
    margin-bottom: 10px;

   }
   .panl .panl-l{
   }
   .panl .panl-l ,.panl-r{
     flex: 1;
   }
  .panl .info-list{
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
  .panl .info-item{
    margin: 0 40px;
  }
  .panl .info-item .value{
    font-size: 40px;
    font-weight: 700;

  }
  .panl .info-item .tips{
    font-size: 10px;
  }
  .static-info{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #ccc;
    margin-top: 20px;
  }
  .bdr{
    border-right: 1px solid #ccc;
  }
  .static-list{
    flex: 1;
    padding: 20px;
    overflow: auto;
  }
  .static-list-title{
    font-size: 12px;
    margin-bottom: 20px;
  }
  table tr,td {
    height: 40px;
  }

</style>

